<template>
  <div class="status-filter">
    <div v-for="item in data" :key="item.key" class="status-filter-item">
      <div class="status-filter-item-title">
        <span>{{ item.title }}</span>
      </div>
      <span v-if="!item.options.length" class="status-filter-nodata">暂无数据</span>
      <el-scrollbar>
        <ul class="status-filter-list">
          <li
            v-for="opitem in item.options"
            :key="opitem.value"
            @click="select(item, opitem)"
            :class="{ active: opitem.value === selected[item.key] }"
          >
            <slot :row="opitem">
              <div class="list-item-wrapper">
                <div class="list-item-left">
                  <el-icon v-if="opitem.icon"><component :is="opitem.icon" /></el-icon>
                </div>
                <div class="list-item-right">
                  <span class="item-title">{{ opitem.label }}</span>
                  <span class="item-total">{{ opitem.total || 0 }}</span>
                </div>
              </div>
            </slot>
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";

interface OptionProp {
  value: string | number;
  label: string;
  icon?: string;
  total?: number;
}

interface StatusDataProps {
  title: string;
  key: string;
  options: OptionProp[];
}

interface StatusFilterProps {
  // 状态值
  data?: StatusDataProps[];
  // 默认值
  defaultValues?: { [key: string]: any };
}

interface FilterEmits {
  (e: "change", value: any): void;
}

// 页面的参数
const props = withDefaults(defineProps<StatusFilterProps>(), {
  data: () => [],
  defaultValues: () => ({})
});

const emit = defineEmits<FilterEmits>();

const selected = ref<{ [key: string]: any }>({});
onBeforeMount(() => {
  console.log("当前页面的参数", props.data, props.defaultValues);
  // console.log("当前页面的选中数据", selected);
  props.data?.forEach(item => {
    selected.value[item.key] = props.defaultValues[item.key] ?? "";
  });
});

const select = (item: StatusDataProps, option: OptionProp) => {
  if (selected.value[item.key] !== option.value) {
    selected.value[item.key] = option.value;
  }
  // 发送事件
  emit("change", selected.value);
};
</script>

<style scoped lang="scss">
.status-filter {
  width: 100%;
  // border: 1px solid red;

  .status-filter-item {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed var(--el-border-color-light);
    // border: 1px solid green;
    &:last-child {
      border-bottom: none;
    }

    .status-filter-item-title {
      margin-top: -2px;
      span {
        font-size: 14px;
        color: var(--el-text-color-regular);
        white-space: nowrap;
      }
    }

    .status-filter-nodata {
      margin: 18px 0;
      font-size: 14px;
      color: var(--el-text-color-regular);
    }

    .status-filter-list {
      display: flex;
      flex: 1;
      padding: 0;
      margin: 13px 0;

      li {
        padding: 5px 15px;
        margin-right: 16px;
        font-size: 13px;
        color: var(--el-color-primary);
        list-style: none;
        cursor: pointer;
        background: var(--el-color-primary-light-9);
        border: 1px solid var(--el-color-primary-light-5);
        border-radius: 5px;

        &:hover {
          color: #fff;
          background: var(--el-color-primary);
          border-color: var(--el-color-primary);
          transition: 0.5s;
        }
        &.active {
          font-weight: bold;
          color: #ffffff;
          background: var(--el-color-primary);
          border-color: var(--el-color-primary);
        }
        .el-icon {
          margin-right: 10px;
          font-size: 1.1rem;
          // font-weight: bold;
        }
        span {
          white-space: nowrap;
        }
      }
    }
  }
}

.list-item-wrapper {
  // border: 1px solid red;
  display: flex;
  align-items: center;

  .list-item-left {
    display: flex;
    align-items: center;
    justify-content: center;
    // border: 1px solid green;
  }

  .list-item-right {
    // border: 1px solid blue;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .item-title {
      font-size: 0.8rem;
      // font-weight: bold;
    }
    .item-total {
      font-size: 1.4rem;
      font-weight: 600;
    }
  }
}
</style>
